<template>
  <div
    class="v-station"
    @dragover="handleDragOver"
  >
    <m-expand-box
      v-show="!isDisplayMode"
      class="_station-sider"
      :minWidth="50"
      :maxWidth="1000"
      :draglineShow="true"
      :init-width="InitSiderWidth"
      contentClass="_sider-body"
      @width-change="handleWidthChange"
    >
      <div
        class="__sider-body-tree"
        @click.capture="setActiveAreaOnSiderTab"
      >
        <m-sider-tabs />
      </div>
      <div class="__sider-body-attr">
        <m-attribute-tabs
          v-if="activeProjectId"
          :key="activeProjectId"
        />
      </div>
    </m-expand-box>

    <div
      class="_station-main"
      :style="{ 'border-right': $global.isShowDataHub ? '1px solid #d0d0d0' : '' }"
      @click.capture="setActiveAreaOnGraphTab"
    >
      <MGraphTabs />
    </div>
    <div class="right-main">
      <right-tabs></right-tabs>
    </div>
    <div
      v-if="footerDragging"
      class="footer-mask"
      :style="footerMaskStyle"
    />
    <div
      v-show="!isDisplayMode"
      class="_station-footer"
    >
      <m-panel
        class="_station-footer-panel"
        @dragMove="handleFootDragMove"
      />
      <m-footer />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, CSSProperties, ref } from "vue";

import MExpandBox from "@/common/ExpandableBox.vue";
import MSiderTabs from "./sider/modelTree/SiderTabs.vue";
import MAttributeTabs from "./sider/attribute/AttributeTabs.vue";
import MGraphTabs from "./graphTabs/GraphTabs.vue";
import RightTabs from "./rightTabs/RightTabs.vue";
import MFooter from "./footer/Footer.vue";
import MPanel from "./panel/Panel.vue";
import { BusEvent, KeyboardEventArea } from "@/constants/Enums";
import { InitSiderWidth } from "@/constants/constants";
import { ipcRenderer } from "electron";
import { IpcMsg } from "@/mdesign-lib/mdesign-main.js";
import { throttle } from "lodash-es";
import { useEvents } from "@/common/useEvents";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps({
  name: {
    type: String,
    default: "",
    required: false
  }
});

const isDisplayMode = computed(() => {
  return app.activeProject?.ui.isDisplayMode;
});

const width = ref(100);
const footerDragging = ref(false);
const footerHeight = ref(200);
const footerMaskStyle = computed(() => {
  return { height: `calc(100vh - ${footerHeight.value}px)`, position: "absolute", top: 0, width: "100%" } as CSSProperties;
});

const handleWidthChange = (widthNew: number) => {
  width.value = widthNew;
  app.global.siderWidth = widthNew;
};
const handleFootDragMove = (dragging: boolean, h: number) => {
  footerDragging.value = dragging;
  footerHeight.value = h;
};
const activeProjectId = computed(() => app.activeProject?.id);
const handleDragOver = (event: DragEvent) => {
  ((event as any).dataTransfer as DataTransfer).dropEffect = "none";
};
useEvents({
  [BusEvent.SHOW_SIM_TIPS]: throttle((shape: any) => {
    ipcRenderer.send(IpcMsg.MessageChannel, {
      windowName: "M-Simulation",
      msg: {
        data: shape.modelId,
        type: "SimVariableValue"
      }
    });
  }, 1000),
  [BusEvent.SHOW_SIM_PORT_INFOS]: throttle((shapeInfo: any) => {
    ipcRenderer.send(IpcMsg.MessageChannel, {
      windowName: "M-Simulation",
      msg: {
        data: {
          modelId: shapeInfo.shape.modelId,
          diagramId: shapeInfo.diagramModelId
        },
        type: "SimPortInfos"
      }
    });
  }, 1000)
});

function setActiveAreaOnSiderTab() {
  app.activeProject?.ui.setActiveArea(app.activeProject?.ui.currentTab as any as KeyboardEventArea);
}
function setActiveAreaOnGraphTab() {
  app.activeProject?.ui.updateActiveAreaOnGraphTab();
}
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-station {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  ._station-sider {
    grid-column: 1/2;
    grid-row: 1/2;
    overflow: hidden;
  }
  ._station-main {
    grid-column: 2/3;
    grid-row: 1/2;
    overflow: hidden;
    background-color: #fff;
    .el-tabs__content {
      background: $frame-siderbar-bg-color;
    }
  }
  .right-main {
    grid-column: 3/4;
    grid-row: 1/2;
    overflow: hidden;
  }
  ._station-footer {
    grid-column: 1/4;
    grid-row: 2/3;
    overflow: hidden;
  }

  ._sider-body {
    padding-right: 4px;
    background-color: $tab-gb-color;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr auto;
    border-right: 1px solid #d0d0d0;
    .__sider-body-tree {
      grid-column: 1/2;
      grid-row: 1/2;
      overflow: hidden;
      min-height: 185px;
      .el-tabs__content {
        background-color: #fff;
        border-right: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
      }
    }
    .__sider-body-attr {
      grid-column: 1/2;
      grid-row: 2/3;
      width: 100%;
      overflow: hidden;
      .el-tabs__content {
        background-color: #fff;
        border-right: 1px solid #d0d0d0;
      }
    }
  }
}
</style>
